<template>
  <el-container class="warp-content link">
    <!-- 左侧主体部分 -->
    <el-main>
      <!-- banner图 -->
      <Banner
        title="实用工具"
        desc="记录一些常用工具、文档等"
        bg-img="bg5.svg"
        bg-size="320"
      />
      <main class="link-main">
        <div
          v-for="item in links"
          :key="item.title"
          class="link-item"
          @click="linkTo(item.link)"
        >
          <img :src="item.img" alt="" />
          <div class="right">
            <h4>{{ item.title }}</h4>
            <p class="desc">{{ item.desc }}</p>
          </div>
        </div>
      </main>
    </el-main>
    <!-- 侧边栏 -->
    <el-aside>
      <MyInfo class="aside-item" />
      <Link class="aside-item" />
      <Category class="aside-item" />
    </el-aside>
  </el-container>
</template>

<script>
import Banner from "@/components/frontend/Banner";
import MyInfo from "@/components/frontend/MyInfo";
import Category from "@/components/frontend/CategoryAside";
import Link from "@/components/frontend/LinkAside";
export default {
  name: "Home",
  components: { Banner, MyInfo, Category, Link },
  data() {
    return {
      // TODO: 链接待完善接后端
      links: [
        {
          img: require("@/assets/svg/link-iconfont.svg"),
          title: "iconfont",
          desc: "阿里巴巴矢量图标库"
        },
        {
          img: require("@/assets/svg/link-color.svg"),
          title: "颜色转换",
          desc: "RGB转16进制",
          link: "https://www.sioe.cn/yingyong/yanse-rgb-16/"
        },
        {
          img: require("@/assets/svg/link-element.svg"),
          title: "element UI",
          desc: "文档",
          link: "https://element.eleme.cn/#/zh-CN"
        },
        {
          img: require("@/assets/svg/link-mdn.svg"),
          title: "MDN web docs",
          desc: "文档",
          link: "https://developer.mozilla.org/zh-CN/"
        },
        {
          img: require("@/assets/svg/link-vue.svg"),
          title: "vue官网",
          desc: "文档",
          link: "https://cn.vuejs.org/"
        },

        {
          img: require("@/assets/svg/link-chahua.svg"),
          title: "unDraw",
          desc: "插画库",
          link: "https://undraw.co/illustrations"
        },
        {
          img:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2545347851,791325695&fm=11&gp=0.jpg",
          title: "eggjs官网",
          desc: "node框架",
          link: "https://eggjs.org/zh-cn/"
        },
        {
          img: require("@/assets/svg/link-sequelize.svg"),
          title: "sequelize",
          desc: "ORM框架",
          link: "https://www.sequelize.com.cn/"
        },
        {
          img: require("@/assets/svg/link-scss.svg"),
          title: "scss",
          desc: "css预处理器",
          link: "https://www.sass.hk/docs/"
        }
      ]
    };
  },
  methods: {
    linkTo(link) {
      window.open(link, "_blank");
    }
  }
};
</script>

<style lang="scss" scoped>
.link {
  padding-bottom: 20px;
}

.aside-item {
  margin-top: 20px;
}

.link-main {
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .link-item {
    border: 1px solid $border-color;
    display: flex;
    width: 30%;
    background-color: white;
    border-radius: 10px;
    margin-top: 20px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    max-height: 80px;

    &:hover {
      transform: translateY(-3px);
    }

    img {
      width: 55px;
      height: 55px;
      border-radius: 5px;
      margin-right: 10px;
    }

    .right {
      flex: 1;
    }

    h4 {
      font-weight: 700;
      font-size: 16px;
      margin: 8px 0;
      padding-bottom: 1px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .desc {
      font-size: 13px;
      color: $text-level-2;
      line-height: 14px;
    }
  }
}

@media screen and (max-width: 576px) {
  .link-main > .link-item {
    width: 49%;
  }
}
</style>
